<script setup lang="ts">

// Vue3.0 的写法
// export default {
//     props: {
//         string_msg: {
//             type: String,
//             required: true,
//             default: 'hello',
//         },
//         list_data: {
//             type: Array,
//             required: true,
//         }
//     }
// }

// Vue3.2 的 setup 写法之一
// defineProps({
//     string_msg: {
//         type: String,
//         required: true,
//         default: 'hello',
//     },
//     list_data: {
//         type: Array,
//         required: true,
//     }
// })

// Vue3.2 的 setup 写法之二（泛型）
const props = withDefaults(
    defineProps<{
        string_msg: string,
        list_data: Array<number>,
    }>(), {
    string_msg: "hello",
    list_data: () => [1, 2, 3],
}
)

</script>

<template>
    <h1>{{ string_msg }}</h1>
    <div v-for="(item_data, index) in list_data" :key="index">
        <li>{{ item_data }}</li>
    </div>
</template>

<style scoped lang="scss">

</style>